.za-switch__input {
  position: relative;
  width: var(--switch-width);
  height: var(--switch-height);
  border: calc((var(--switch-height) - var(--switch-handle-size)) / 2) solid var(--switch-border-color);
  border-radius: var(--radius-round);
  background-color: var(--switch-background);
  vertical-align: middle;
  transition: background-color 0.1s, border 0.1s;
  outline: 0;
  -webkit-appearance: none;
}
.za-switch__input:before, .za-switch__input:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: var(--switch-handle-size);
  border-radius: var(--radius-round);
}
.za-switch__input:before {
  width: calc(var(--switch-width) - var(--switch-height) + var(--switch-handle-size));
  background-color: var(--switch-background);
  transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}
.za-switch__input:after {
  width: var(--switch-handle-size);
  background-color: var(--switch-handle-background);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
}
.za-switch__input:checked {
  border: calc((var(--switch-height) - var(--switch-handle-size)) / 2) solid var(--theme-primary);
  background-color: var(--theme-primary);
}
.za-switch__input:checked:before {
  transform: scale(0);
}
.za-switch__input:checked:after {
  transform: translateX(calc(var(--switch-width) - var(--switch-height)));
}

.za-switch--disabled .za-switch__input {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}
